<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sys</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min-lumen.css" rel="stylesheet">
    <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../../css/plugins/pageMe/pageMe.css" rel="stylesheet"/>
    <link href="../../css/plugins/progressbar/mprogress.css" rel="stylesheet"/>
    <link href="../../css/plugins/progressbar/style.css" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div id="body">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>用户表管理模块</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="clearfix hidden-xs"></div>
                    <div class="col-sm-12">
                        <!-- Example Checkbox Select -->
                        <div class="example-wrap">

                            <!-- 查询区域 -->
                            <div id="queryModel" tagId="queryTag">
                                <input type="text" v-model="username" placeholder="用户名"
                                       style="margin-top: 10px"/>&nbsp;
                                <input type="text" v-model="createTime" placeholder="创建时间"
                                       style="margin-top: 10px"/>&nbsp;
                                <input type="text" v-model="userLevel" placeholder="1.青铜2.白银3.黄金"
                                       style="margin-top: 10px"/>&nbsp;
                                <input type="text" v-model="phone" placeholder="phone"
                                       style="margin-top: 10px"/>&nbsp;
                                <button type="button" class="btn btn-primary btn-sm" @click="queryInfo()">查询</button>&nbsp;
                                <button type="button" class="btn btn-primary btn-sm" @click="exportExcel()">导出excel
                                </button>
                            </div>
                            <!-- 查询区域 end-->

                            <!-- 添加数据区域 -->
                            <div style="text-align: right; margin: 8px">
                                <button tagId="addTag" type="button" class="btn btn-success btn-sm" onclick="addMsg()"
                                        style="margin: 8px">
                                    添加数据
                                </button>
                            </div>

                            <!-- 查询结果表格显示区域 -->
                            <div id="newsContent" class="table-responsive" style="overflow: scroll;" v-cloak>
                                <table class="table table-hover table-bordered text-nowrap">
                                    <tr>
                                        <th>操作</th>
                                        <th>主键</th>
                                        <th>用户名</th>
                                        <th>密码</th>
                                        <th>创建时间</th>
                                        <th>更新时间</th>
                                        <th>1.青铜2.白银3.黄金</th>
                                        <th>1男0女</th>
                                        <th>角色id</th>
                                        <th>email</th>
                                        <th>phone</th>
                                        <th>hobby</th>
                                    </tr>
                                    <tbody id="dataTable">
                                    <tr v-for="data in result">
                                        <td>
                                                <span tagId="upTag"><button type="button" class="btn btn-info btn-sm"
                                                                            @click="upMsg(data.id,'/tbUser/select')">
                                                    更新
                                                </button>&nbsp;</span>
                                            <span tagId="delTag"><button type="button" class="btn btn-danger btn-sm"
                                                                         @click="delMsg(data.id,'/tbUser/delete')">
                                                    删除
                                                </button>&nbsp;</span>
                                        </td>
                                        <td>{{data.id}}</td>
                                        <td>{{data.username}}</td>
                                        <td>{{data.password}}</td>
                                        <td>{{data.createTime}}</td>
                                        <td>{{data.updateTime}}</td>
                                        <td>{{data.userLevel}}</td>
                                        <td>{{data.sex}}</td>
                                        <td>{{data.roleId}}</td>
                                        <td>{{data.email}}</td>
                                        <td>{{data.phone}}</td>
                                        <td>{{data.hobby}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div id="pageID" class="page_div"></div>
                            </div>
                            <!-- 查询结果表格显示区域 end-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改模态框 -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="updateModalLabel">修改信息</h4>
                </div>
                <div class="modal-body" id="updateModalBody">
                    <form>
                        <div class="form-group">
                            <label for="username-attr" class="control-label">用户名:</label>
                            <input type="text" class="form-control" id="username-attr"
                                   v-model="username"/>
                        </div>
                        <div class="form-group">
                            <label for="password-attr" class="control-label">密码:</label>
                            <input type="text" class="form-control" id="password-attr"
                                   v-model="password"/>
                        </div>
                        <div class="form-group">
                            <label for="sex-attr" class="control-label">1男0女:</label>
                            <input type="text" class="form-control" id="sex-attr"
                                   v-model="sex"/>
                        </div>
                        <div class="form-group">
                            <label for="email-attr" class="control-label">email:</label>
                            <input type="text" class="form-control" id="email-attr"
                                   v-model="email"/>
                        </div>
                        <div class="form-group">
                            <label for="phone-attr" class="control-label">phone:</label>
                            <input type="text" class="form-control" id="phone-attr"
                                   v-model="phone"/>
                        </div>
                        <div class="form-group">
                            <label for="hobby-attr" class="control-label">hobby:</label>
                            <input type="text" class="form-control" id="hobby-attr"
                                   v-model="hobby"/>
                        </div>
                        <div class="form-group">
                            <input type="hidden" class="form-control" id="id-attr"
                                   v-model="id"/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="confirmUp()">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加模态框 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="addModalLabel">添加信息</h4>
                </div>
                <div class="modal-body" id="addModalBody">
                    <form>
                        <div class="form-group">
                            <label for="id-insert" class="control-label">主键:</label>
                            <input type="text" class="form-control" id="id-insert"
                                   v-model="id"/>
                        </div>
                        <div class="form-group">
                            <label for="username-insert" class="control-label">用户名:</label>
                            <input type="text" class="form-control" id="username-insert"
                                   v-model="username"/>
                        </div>
                        <div class="form-group">
                            <label for="password-insert" class="control-label">密码:</label>
                            <input type="text" class="form-control" id="password-insert"
                                   v-model="password"/>
                        </div>
                        <div class="form-group">
                            <label for="createTime-insert" class="control-label">创建时间:</label>
                            <input type="text" class="form-control" id="createTime-insert"
                                   v-model="createTime"/>
                        </div>
                        <div class="form-group">
                            <label for="updateTime-insert" class="control-label">更新时间:</label>
                            <input type="text" class="form-control" id="updateTime-insert"
                                   v-model="updateTime"/>
                        </div>
                        <div class="form-group">
                            <label for="userLevel-insert" class="control-label">1.青铜2.白银3.黄金:</label>
                            <input type="text" class="form-control" id="userLevel-insert"
                                   v-model="userLevel"/>
                        </div>
                        <div class="form-group">
                            <label for="sex-insert" class="control-label">1男0女:</label>
                            <input type="text" class="form-control" id="sex-insert"
                                   v-model="sex"/>
                        </div>
                        <div class="form-group">
                            <label for="roleId-insert" class="control-label">角色id:</label>
                            <input type="text" class="form-control" id="roleId-insert"
                                   v-model="roleId"/>
                        </div>
                        <div class="form-group">
                            <label for="email-insert" class="control-label">email:</label>
                            <input type="text" class="form-control" id="email-insert"
                                   v-model="email"/>
                        </div>
                        <div class="form-group">
                            <label for="phone-insert" class="control-label">phone:</label>
                            <input type="text" class="form-control" id="phone-insert"
                                   v-model="phone"/>
                        </div>
                        <div class="form-group">
                            <label for="hobby-insert" class="control-label">hobby:</label>
                            <input type="text" class="form-control" id="hobby-insert"
                                   v-model="hobby"/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="confirmAdd()">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="../../js/content.js?v=1.0.0"></script>


    <!-- Bootstrap table -->
    <script src="../../js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="../../js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- Peity -->
    <!-- <script src="../../js/demo/bootstrap-table-demo.js"></script> -->
    <script src="../../js/vue/vue.min.js"></script>
    <script src="../../js/util/ajaxFactory.js"></script>
    <script src="../../js/util/crudVueFactory.js"></script>
    <script src="../../js/util/pageMe.js"></script>
    <script src="../../js/config/config.js"></script>
    <script src="../../js/plugins/layer/layer.min.js"></script>
    <script src="../../js/plugins/progressbar/init-mprogress.js"></script>
    <script src="../../js/plugins/progressbar/mprogress.js"></script>

    <script>
        var currentPage = 1;
        var totalPage;
        var sqlMap = {};
        //排序的数据
        var orderData = [];
        var controllerPrefix = "tbUser";
        var methodName = "likeSelect";

        var queryVue = new Vue({
                el: '#queryModel',
                data: {
                    username:
                        '',
                    createTime:
                        '',
                    userLevel:
                        '',
                    phone:
                        ''
                },
                methods: {
                    queryInfo: function () {
                        sqlMap = {};
                        sqlMap.username = this.username;
                        sqlMap.createTime = this.createTime;
                        sqlMap.userLevel = this.userLevel;
                        sqlMap.phone = this.phone;
                        currentPage = 1;
                        orderData = [];
                        $crud.getDataByCurrentPage();
                    }
                    ,
                    exportExcel: function () {

                        //显示进度条
                        InitMprogress();

                        var param = '';

                        for (var key in sqlMap) {
                            if (sqlMap[key] != '') {
                                param += key + "=" + sqlMap[key] + "&";
                            }
                        }

                        window.location.href = basePath + "/" + controllerPrefix
                            + "/exportExcel?" + param;
                        // 进度条消失
                        setTimeout("MprogressEnd()", totalPage / 20 * 1000);
                    }
                }

            })
        ;

        function makeResult(data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i] == null) {
                    data[i] = {};
                    data[i]["id"] = "无";
                    data[i]["username"] = "无";
                    data[i]["password"] = "无";
                    data[i]["createTime"] = "无";
                    data[i]["updateTime"] = "无";
                    data[i]["userLevel"] = "无";
                    data[i]["sex"] = "无";
                    data[i]["roleId"] = "无";
                    data[i]["email"] = "无";
                    data[i]["phone"] = "无";
                    data[i]["hobby"] = "无";
                }
            }
        }

        var tableVue = new Vue({
            el: '#newsContent',
            data: {
                result: []
            },
            //created:
            mounted: function () {
                $crud.getDataByCurrentPage();
            },
            methods: {

                upMsg: function (id, path) {

                    $z.ajaxPost({
                        url: basePath + path,
                        data: {
                            id: id
                        },
                        success: function (data) {
                            $z.dealCommonResult(data, function () {
                                data = data.data;
                                upVue.id = data[0]["id"];
                                upVue.username = data[0]["username"];
                                upVue.password = data[0]["password"];
                                upVue.sex = data[0]["sex"];
                                upVue.email = data[0]["email"];
                                upVue.phone = data[0]["phone"];
                                upVue.hobby = data[0]["hobby"];
                                $('#updateModal').modal('show');
                            });
                        }
                    })
                    ;
                },
                delMsg: function (id, path) {
                    layer.confirm("<em style='color:black'>" + '执行删除后将无法恢复，确定继续吗？' + "</em>", {
                        icon: 3,
                        offset: "200px",
                        title: '温馨提示'
                    }, function (index) {
                        //do something
                        $z.ajaxPost({
                            url: basePath + path,
                            data: {
                                id: id
                            },
                            success: function (data) {
                                $z.dealCommonResult(data, function () {
                                    $crud.getDataByCurrentPage();
                                    layer.alert("<em style='color:black'>" + "删除成功！" + "</em>", {
                                        icon: 6,
                                        offset: "200px",
                                        title: '提示'
                                    });
                                });
                            }
                        })
                        ;
                        layer.close(index);
                    });
                }
            }
        });

        var upVue = new Vue({
                el: "#updateModal",
                data: {
                    id:
                        '',
                    username:
                        '',
                    password:
                        '',
                    sex:
                        '',
                    email:
                        '',
                    phone:
                        '',
                    hobby:
                        ''
                },
                methods: {
                    confirmUp: function () {
                        $z.ajaxPost({
                            url: basePath + "/" + controllerPrefix + "/update",
                            data: {
                                id:
                                this.id,
                                username:
                                this.username,
                                password:
                                this.password,
                                sex:
                                this.sex,
                                email:
                                this.email,
                                phone:
                                this.phone,
                                hobby:
                                this.hobby
                            },
                            success: function (data) {
                                $z.dealCommonResult(data, function () {
                                    layer.alert("<em style='color:black'>" + "更新成功！" + "</em>", {
                                        icon: 6,
                                        offset: "200px",
                                        title: '提示'
                                    });
                                    $('#updateModal').modal('hide');
                                    $crud.getDataByCurrentPage();
                                });

                            }
                        })
                        ;
                    }
                }
            })
        ;

        function addMsg() {
            $('#addModal').modal('show');
        }

        var addVue = new Vue({

                el: "#addModal",
                data: {
                    id:
                        '',
                    username:
                        '',
                    password:
                        '',
                    createTime:
                        '',
                    updateTime:
                        '',
                    userLevel:
                        '',
                    sex:
                        '',
                    roleId:
                        '',
                    email:
                        '',
                    phone:
                        '',
                    hobby:
                        ''
                },
                methods: {
                    confirmAdd: function () {
                        $z.ajaxPost({
                            url: basePath + "/" + controllerPrefix + "/add",
                            data: {
                                id:
                                this.id,
                                username:
                                this.username,
                                password:
                                this.password,
                                createTime:
                                this.createTime,
                                updateTime:
                                this.updateTime,
                                userLevel:
                                this.userLevel,
                                sex:
                                this.sex,
                                roleId:
                                this.roleId,
                                email:
                                this.email,
                                phone:
                                this.phone,
                                hobby:
                                this.hobby
                            },
                            success: function (data) {
                                $z.dealCommonResult(data, function () {
                                    layer.alert("<em style='color:black'>" + "添加成功！" + "</em>", {
                                        icon: 6,
                                        offset: "200px",
                                        title: '提示'
                                    });
                                    $('#addModal').modal('hide');
                                    //初始化
                                    sqlMap = {};
                                    currentPage = 1;
                                    $crud.getDataByCurrentPage();
                                });

                            }
                        })
                        ;
                    }
                }
            })
        ;
    </script>
</div>
</body>
</html>
